<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        .nav{
            width: 100%;
            display: flex;
        }
        .nav div{
            flex: 1;
            text-align: center;
            padding: 20px 0;
        }
        .active{
            border-bottom: 3px solid red;
        }
        li{
        padding: 10px;
        }
    </style>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script type='text/babel'>
    class App extends React.Component{
        state={
            navList:["全部","已完成","未完成"],
            activeIndex:0,
            list:[
                {
                    title:"学习",
                    isOver:false
                },
                {
                    title:"游戏",
                    isOver:true
                },{
                    title:"蹦迪",
                    isOver:false
                }
            ],
        }
        render(){
            let {navList,activeIndex,list} = this.state;
            return (
                <div>
                    <div className='nav'>
                        {navList.map((item,index)=>{
                            return (
                                <div key={index} className={activeIndex===index?'active':""} onClick={()=>{
                                    this.setState((a)=>{
                                        return {
                                            activeIndex:index
                                        }
                                    })
                                }}>{item}</div>
                            )
                        })}   
                    </div>
                    <ol>
                        {
                            activeIndex ===0 && list.map((item,index)=>{
                                return (
                                    <li key={index}>
                                        {item.title}
                                        ----------
                                        {item.isOver && <span>已完成</span>}   
                                        {!item.isOver && <button onClick={()=>{
                                            list[index].isOver = true;
                                            this.setState({
                                                list:list
                                            })
                                        }}>确认完成</button> } 
                                    </li>
                                )
                            })
                        }    
                        {
                            activeIndex === 1 &&  list.filter((item)=>item.isOver).map((item,index)=>{
                                return (
                                    <li key={index}>{item.title}</li>
                                )
                            })
                        }
                        {
                            activeIndex === 2 &&  list.filter((item)=>!item.isOver).map((item,index)=>{
                                return (
                                    <li key={index}>{item.title}</li>
                                )
                            })
                        }
                    </ol>
                </div>
            )
        }
    }

    ReactDOM.render(<App/>,document.getElementById("root"));

    // let arr = [0,12,3,4,5,6,7,78];
    // let newArry = arr.filter(item=>{
    //     return item>5
    // })
    // console.log(newArry)
</script>
</html>